<template>
    <div class="mainControl">
        <VonCrumbs :title="crumbsTitle"></VonCrumbs>
        <div class="widget">
            <VonSelect
                    :placeholder="selectInputPlaceholder"
                    v-model="detail.model"
                    :options="selectOptions"
                    v-if="showSelect"
            ></VonSelect>
            <VonInput
                    v-if="showInput"
                    v-model="detail.value"
                    width="260px"
                    :placeholder="searchInputPlaceholder"
                    @change="getTableList">
            </VonInput>
            <el-button
                    v-if="showAddButton"
                    type="primary"
                    size="small"
                    @click="addDevice"
                    class="addButton">
                添加
            </el-button>
            <el-button
                    v-if="showExcelButton"
                    type="primary"
                    class="addButton"
                    size="small">
                导出
                <i class="el-icon-upload el-icon--right"></i>
            </el-button>
        </div>
        <div class="tableContent">
            <VonTable :column="column" :tableData="tableData">
                <template slot="operation">
                    <template v-if="componentName=='RecipeManage'">
                        <el-table-column
                                align="center"
                                label="物料信息"
                        >
                            <template slot-scope="scope">
                                <span>{{11111}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="工站-设备"
                        >
                            <template slot-scope="scope">
                                <span>{{11122222222222222}}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <el-table-column
                        align="center"
                        label="操作"
                        width="200">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    size="small"
                                    @click="editDevice(scope.row)">
                                编辑
                            </el-button>
                            <el-button
                                    type="text"
                                    size="small"
                                    style="color: indianred"
                                    @click="deleteDevice(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </template>
            </VonTable>
        </div>
        <VonDialog
                :title="type==1?'新增':'编辑'"
                @cancelResult="cancelResult"
                @commitResult='commitResult'
                :isShow_Popup="isShow_Popup">
            <div class="deviceForm" slot="content">
                <el-form ref="form" :model="form" label-width="48px">
                    <el-form-item v-if="componentName == 'deviceManage'">
                        <VonInput v-model="form.name" label="设备名称" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'deviceManage'">
                        <VonInput v-model="form.IP" label="IP地址" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'deviceManage'">
                        <el-col :span="18">
                            <VonInput v-model="form.SOP" label="SOP地址" width="360px"></VonInput>
                        </el-col>
                        <el-col :span="6">
                            <el-upload
                                    action="http://121.4.228.125:8011/device/create"
                                    class="upload-demo"
                                    :show-file-list="false"
                                    :http-request="uploadSectionFile"
                                    :limit="1"
                                    :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-col>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'MaterialInfo'">
                        <VonInput v-model="form.name" label="名称" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'MaterialInfo'">
                        <VonInput v-model="form.name" label="物料代码" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'MaterialInfo'">
                        <VonInput v-model="form.name" label="条码信息" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'MaterialInfo'">
                        <VonSelect v-model="form.name" label="选择感应尾" width="460px"></VonSelect>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'ProductManage'">
                        <VonInput v-model="form.name" label="产品名称" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'ProductManage'">
                        <VonSelect v-model="form.name" label="选择配方(多选)" width="460px"></VonSelect>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'RecipeManage'">
                        <VonInput v-model="form.name" label="配方名称" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'RecipeManage'">
                        <VonSelect v-model="form.name" label="物料信息" width="460px"></VonSelect>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'RecipeManage'">
                        <el-row class="RecipeManageForm">
                            <el-col :span="11" :offset="1">
                                <p>工站</p>
                                <p v-for="item in 14" class="workStation">{{item}}</p>
                            </el-col>
                            <el-col :span="12">
                                <p>设备</p>
                                <template v-for="item in 14">
                                    <VonSelect
                                            width="90px"
                                            :placeholder="1"
                                            style=" margin: 10px 0;"
                                            height="30px"
                                            v-model="form.name"
                                            >
                                    </VonSelect>
                                </template>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'">
                        <VonSelect v-model="form.position" label="职位" width="460px" :options="positionList"></VonSelect>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'">
                        <VonInput v-model="form.name" label="姓名" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'">
                        <VonInput v-model="form.number" label="工号" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'">
                        <VonInput v-model="form.password" label="密码" width="460px"></VonInput>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage' && form.position == 'operator'">
                        <VonSelect v-model="form.workStation" label="选择工站" width="460px"></VonSelect>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage' && form.position == 'engineer'">
                        <template>
                            <p class="PersonnelManage">授权</p>
                            <el-checkbox-group v-model="checkList"  class="checkList">
                                <el-checkbox label="扫码枪"></el-checkbox>
                                <el-checkbox label="拧紧枪"></el-checkbox>
                                <el-checkbox label="测试仪"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'  && form.position == 'engineer'">
                        <template>
                            <el-checkbox-group v-model="checkList"  class="checkList">
                                <el-checkbox label="数据查询"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'  && form.position == 'engineer'">
                        <template>
                            <el-checkbox-group v-model="checkList"  class="checkList">
                                <el-checkbox label="数据下载"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'  && form.position == 'engineer'">
                        <template>
                            <el-checkbox-group v-model="checkList"  class="checkList">
                                <el-checkbox label="配方编辑查询"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                    <el-form-item v-if="componentName == 'PersonnelManage'  && form.position == 'engineer'">
                        <template>
                            <el-checkbox-group v-model="checkList"  class="checkList">
                                <el-checkbox label="电子SOP修改"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </el-form-item>
                </el-form>
            </div>
        </VonDialog>
    </div>
</template>

<script>
  export default {
    name: "CommonBusinessTemplate",
    data(){
      return{
        detail:{
          model:'',
          value:''
        },
        positionList:[
          {name:'工程师',id:'engineer'},
          {name:'操作员',id:'operator'}
        ],
        type:1,
        checkList:[],
        checkList1:[],
        fileList:[],
        form:{
          id:'',
          name:'',
          IP:'',
          SOP:''
        },
        isShow_Popup:false,
        tableData:[],
        selectOptions:[],
      }
    },
    props:{
      componentName:{
        type:String,

      },
      column:{
        type:Array,
      },
      selectInputPlaceholder:{
        type:String,
        default:'选择'
      },
      searchInputPlaceholder:{
        type:String,
        default:'搜索'
      },
      showExcelButton:{
        type:Boolean,
        default:false
      },
      showSelect:{
        type:Boolean,
        default:false
      },
      showAddButton:{
        type:Boolean,
        default:false
      },
      showInput:{
        type:Boolean,
        default:false
      },
      crumbsTitle:{
        type:String,
        default:''
      },
      addElementApi:{
        type:Function,
        default(){
          return new Promise(()=>{})
        }
      },
      editElementApi:{
        type:Function,
        default(){
          return new Promise(()=>{})
        }
      },
      deleteElementApi:{
        type:Function,
        default(){
          return new Promise(()=>{})
        }
      },
      queryTableApi:{
        type:Function,
        default(){
          return new Promise(()=>{})
        }
      },
      querySelectOptionsApi:{
        type:Function,
        default(){
          return new Promise(()=>{})
        }
      },
    },
    methods:{
      deleteDevice(row){
        let { id } = row;
        this.deleteElementApi({id}).then(res=>{
          if(res.status == 200 || res.status == 204){
            this.$message.success('删除成功');
            this.getTableList();
          }else{
            this.$message.error('删除失败')
          }
        })
      },
      uploadSectionFile(data){
        formData.append('File',data.file);
        formData.append('Name',this.form.name,);
        formData.append('IP',this.form.IP);
        if(this.type == 2){
          formData.append('id',this.form.id);
        }
        this.form.SOP = data.file.name;
      },
      cancelResult(){
        this.isShow_Popup = false;
      },
      resetForm(){
        for(let item in this.form){
          this.form[item] = '';
        }
      },
      commitResult(){
        let ApiMethod;
        if(this.type == 1){
          ApiMethod = this.addElementApi;
        }else{
          ApiMethod = this.editElementApi;
        }
        ApiMethod(formData).then(res=>{
          if(res.status == 200 || res.status == 204){
            this.$message.success(this.type == 1?'新增成功':'修改成功');
            this.getTableList();
          }else{
            this.$message.error(this.type == 1?'新增失败':'修改失败')
          }
        });
        this.isShow_Popup = false;
        this.resetForm();
      },
      addDevice() {
        this.resetForm();
        this.type = 1;
        this.isShow_Popup = true;
      },
      editDevice(row){
        let {id,ip,name,sopId} = row;
        this.form = {
          id,
          name,
          IP:ip,
          SOP:sopId
        };
        this.type = 2;
        this.isShow_Popup = true;
      },
      getSelectOptions(){
        this.querySelectOptionsApi().then(res=>{
          if(res.data && res.status == 200){
            this.selectOptions = res.data;
          }else{
            this.$message.error('查询数据失败')
          }
        })
      },
      getTableList(){
        let params = {name:this.detail.value};
        this.queryTableApi(params).then(res=>{
          if(res.data && res.status == 200){
            this.tableData = res.data;
          }else{
            this.$message.error('查询数据失败')
          }
        })
      }
    },
    created() {
      this.getTableList();
      this.getSelectOptions();
    }
  }
</script>

<style scoped lang="scss">
    @import "../../style/mainControl";
    .PersonnelManage{
        color: #fff;
        margin-bottom: 26px;
    }
    /deep/.checkList{
        margin:10px 30px 0;
        .el-checkbox{
            color: white;
            .el-checkbox__input{
                display: inline-block;
            }
        }
    }
</style>
